// src/components/InfoCard/InfoCard.tsx
import React, { useState } from 'react';
import './DataInfoCard.css';

interface InfoCardProps {
  data: {
    title: string;
    description: string;
    citationTitle: string;
    citation: string;
    datasetInfoTitle: string;
    datasetInfo: string;
    acknowledgmentTitle: string;
    acknowledgment: string;
  };
  releaseInfo: {
    organization: string;
    releaseDate: string;
    releaseHomepage: string;
    releaseLink: string;
  };
}

const DataInfoCard: React.FC<InfoCardProps> = ({ data, releaseInfo }) => {
  const [activeSection, setActiveSection] = useState('description');

  const renderContent = () => {
    switch (activeSection) {
      case 'description':
        return (
          <div className="info-card-content">
            <div className="info-card-header">
              <h2 className="info-card-title">{data.title}</h2>
            </div>
            <p className="info-card-description">{data.description}</p>
            <h3 className="info-card-section-title">{data.citationTitle}</h3>
            <pre className="info-card-citation">{data.citation}</pre>
            <h3 className="info-card-section-title">{data.datasetInfoTitle}</h3>
            <pre className="info-card-dataset-info">{data.datasetInfo}</pre>
            <h3 className="info-card-section-title">{data.acknowledgmentTitle}</h3>
            <pre className="info-card-acknowledgment">{data.acknowledgment}</pre>
          </div>
        );
        case 'releaseInfo':
          return (
            <div className="info-card-content info-card-release-info">
              <h3 className="info-card-section-title">发布机构</h3>
              <p>{releaseInfo.organization}</p>
              <h3 className="info-card-section-title">发布时间</h3>
              <p>{releaseInfo.releaseDate}</p>
              <h3 className="info-card-section-title">发布首页</h3>
              <a href={releaseInfo.releaseHomepage} target="_blank" rel="noopener noreferrer">{releaseInfo.releaseHomepage}</a>
              <h3 className="info-card-section-title">发布链接</h3>
              <a href={releaseInfo.releaseLink} target="_blank" rel="noopener noreferrer">{releaseInfo.releaseLink}</a>
            </div>
          );
        
      case 'datasetInfo':
        return (
          <div className="info-card-content">
            <h3 className="info-card-section-title">占位文字2</h3>
            <p style={{fontSize:'1.25rem'}}>这是占位符内容，用于显示评论区的占位符文本。</p>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="info-card">
      <div className="info-card-nav">
        <button
          className={activeSection === 'description' ? 'active' : ''}
          onClick={() => setActiveSection('description')}
        >
          数据集介绍
        </button>
        <button
          className={activeSection === 'releaseInfo' ? 'active' : ''}
          onClick={() => setActiveSection('releaseInfo')}
        >
          发布信息
        </button>
        <button
          className={activeSection === 'datasetInfo' ? 'active' : ''}
          onClick={() => setActiveSection('datasetInfo')}
        >
          评论区
        </button>
      </div>
      {renderContent()}
    </div>
  );
};

export default DataInfoCard;
